<template>
  <view class="container">
    <!-- 左边PK区域 -->
    <view class="pk-area left-area">
      <view class="pk-title">玩家1</view>
      <view 
        class="fixed-slot"
        @drop="onDrop($event, 'left')"
        @dragover.prevent="onDragOver"
        @dragenter.prevent="onDragEnter"
        @dragleave="onDragLeave"
        :class="{ 'drag-over': dragOverSide === 'left' }"
      >
        <view v-if="leftPlayer" class="character">
          <image :src="leftPlayer.header" class="avatar"></image>
          <text class="nickname">{{ leftPlayer.nick_name }}</text>
        </view>
        <text v-else class="placeholder">拖拽角色到此处</text>
      </view>
    </view>

    <!-- VS中间区域 -->
    <view class="vs-area">
      <text class="vs-text">VS</text>
    </view>

    <!-- 右边PK区域 -->
    <view class="pk-area right-area">
      <view class="pk-title">玩家2</view>
      <view 
        class="fixed-slot"
        @drop="onDrop($event, 'right')"
        @dragover.prevent="onDragOver"
        @dragenter.prevent="onDragEnter"
        @dragleave="onDragLeave"
        :class="{ 'drag-over': dragOverSide === 'right' }"
      >
        <view v-if="rightPlayer" class="character">
          <image :src="rightPlayer.header" class="avatar"></image>
          <text class="nickname">{{ rightPlayer.nick_name }}</text>
        </view>
        <text v-else class="placeholder">拖拽角色到此处</text>
      </view>
    </view>

    <!-- 可选角色区域 -->
    <view class="character-list">
      <view 
        v-for="(character, index) in characters" 
        :key="index"
        class="character-item"
        draggable="true"
        @dragstart="onDragStart($event, character)"
        :style="{ transition: character.transition }"
      >
        <image :src="character.header" class="avatar"></image>
        <text class="nickname">{{ character.nick_name }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dragOverSide: null,
      draggedCharacter: null,
      leftPlayer: null,
      rightPlayer: null,
      characters: [
        {
          id: 1,
          nick_name: '角色1',
          header: '/static/avatars/1.jpg',
          transition: 'all 0.3s ease'
        },
        {
          id: 2,
          nick_name: '角色2',
          header: '/static/avatars/2.jpg',
          transition: 'all 0.3s ease'
        },
        {
          id: 3,
          nick_name: '角色3',
          header: '/static/avatars/3.jpg',
          transition: 'all 0.3s ease'
        },
        {
          id: 4,
          nick_name: '角色4',
          header: '/static/avatars/4.jpg',
          transition: 'all 0.3s ease'
        },
        {
          id: 5,
          nick_name: '角色5',
          header: '/static/avatars/5.jpg',
          transition: 'all 0.3s ease'
        },
      ]
    }
  },
  methods: {
    onDragStart(e, character) {
      this.draggedCharacter = character;
      e.dataTransfer.setData('text/plain', character.id);
    },
    
    onDragEnter(e, side) {
      this.dragOverSide = side;
    },
    
    onDragLeave() {
      this.dragOverSide = null;
    },
    
    onDragOver(e) {
      e.preventDefault();
    },
    
    onDrop(e, side) {
      e.preventDefault();
      this.dragOverSide = null;
      
      if (!this.draggedCharacter) return;
      
      // 临时存储被替换的角色
      let replacedCharacter = null;
      
      if (side === 'left' && this.leftPlayer) {
        replacedCharacter = this.leftPlayer;
      } else if (side === 'right' && this.rightPlayer) {
        replacedCharacter = this.rightPlayer;
      }
      
      // 设置新角色
      if (side === 'left') {
        this.leftPlayer = this.draggedCharacter;
      } else {
        this.rightPlayer = this.draggedCharacter;
      }
      
      // 更新角色列表
      this.updateCharacterList(replacedCharacter);
      
      this.draggedCharacter = null;
      
      // 检查对战状态
      this.checkBattleReady();
    },
    
    updateCharacterList(replacedCharacter) {
      // 从角色列表中移除当前拖拽的角色
      this.characters = this.characters.filter(
        char => char.id !== this.draggedCharacter.id
      );
      
      // 如果有被替换的角色，将其添加回角色列表
      if (replacedCharacter) {
        // 添加动画效果
        replacedCharacter.transition = 'all 0.5s ease';
        this.characters.push(replacedCharacter);
        
        // 短暂延迟后恢复默认transition
        setTimeout(() => {
          const index = this.characters.findIndex(c => c.id === replacedCharacter.id);
          if (index !== -1) {
            this.$set(this.characters[index], 'transition', 'all 0.3s ease');
          }
        }, 500);
      }
    },
    
    checkBattleReady() {
      if (this.leftPlayer && this.rightPlayer) {
        uni.showToast({
          title: '对战准备就绪!',
          icon: 'none'
        });
      }
    }
  }
}
</script>

<style>
.container {
  display: flex;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  background-color: #f8f8f8;
}

.pk-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.left-area {
  margin-right: 20px;
}

.right-area {
  margin-left: 20px;
}

.pk-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.fixed-slot {
  width: 150px;
  height: 200px;
  border: 2px dashed #999;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  transition: all 0.3s;
  position: relative;
}

.drag-over {
  border-color: #007AFF;
  background-color: rgba(0, 122, 255, 0.1);
  transform: scale(1.05);
}

.placeholder {
  color: #999;
  font-size: 16px;
}

.vs-area {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
}

.vs-text {
  font-size: 32px;
  font-weight: bold;
  color: #ff4757;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.character-list {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px;
  background-color: #fff;
  border-top: 1px solid #eee;
}

.character-item, .character {
  width: 120px;
  height: 160px;
  margin: 10px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.character-item:active {
  transform: scale(0.95);
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nickname {
  font-size: 14px;
  text-align: center;
  padding: 0 5px;
  color: #333;
  font-weight: 500;
}

/* 添加返回动画效果 */
@keyframes returnAnimation {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

.returning {
  animation: returnAnimation 0.5s ease;
}
</style>